<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Row-Tpl</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/tpl_row.css">
    <link rel="stylesheet" href="css/tpl_common.css">
    <link rel="stylesheet" href="css/co1.css" id="tpl-css-file">
</head>
<body>

<div class="row">
    <div id="tpl-category">

        <button class="tpl-anchor" data-tpl_id="1">1</button>
        <button class="tpl-anchor" data-tpl_id="2">2</button>
        <button class="tpl-anchor" data-tpl_id="3">3</button>
        <button class="tpl-anchor" data-tpl_id="4">4</button>
        <button class="tpl-anchor" data-tpl_id="5">5</button>
        <button class="tpl-anchor" data-tpl_id="6">6</button>
        <button class="tpl-anchor" data-tpl_id="7">7</button>
        <button class="tpl-anchor" data-tpl_id="8">8</button>
        <button class="tpl-anchor" data-tpl_id="9">9</button>
        <button class="tpl-anchor" data-tpl_id="10">10</button>
        <button class="tpl-anchor" data-tpl_id="11">11</button>
        <button class="tpl-anchor" data-tpl_id="12">12</button>
        <button class="tpl-anchor" data-tpl_id="13">13</button>
        <button class="tpl-anchor" data-tpl_id="14">14</button>
        <button class="tpl-anchor" data-tpl_id="15">15</button>
        <button class="tpl-anchor" data-tpl_id="16">16</button>
        <button class="tpl-anchor" data-tpl_id="17">17</button>
        <button class="tpl-anchor" data-tpl_id="18">18</button>
        <button class="tpl-anchor" data-tpl_id="19">19</button>
        <button class="tpl-anchor" data-tpl_id="20">20</button>
        <button class="tpl-anchor" data-tpl_id="21">21</button>
        <button class="tpl-anchor" data-tpl_id="22">22</button>
        <button class="tpl-anchor" data-tpl_id="23">23</button>
        <button class="tpl-anchor" data-tpl_id="24">24</button>
        <button class="tpl-anchor" data-tpl_id="25">25</button>
        <button class="tpl-anchor" data-tpl_id="26">26</button>
        <button class="tpl-anchor" data-tpl_id="27">27</button>
        <button class="tpl-anchor" data-tpl_id="28">28</button>
        <button class="tpl-anchor" data-tpl_id="29">29</button>
        <button class="tpl-anchor" data-tpl_id="30">30</button>
        <button class="tpl-anchor" data-tpl_id="31">31</button>
        <button class="tpl-anchor" data-tpl_id="32">32</button>
        <button class="tpl-anchor" data-tpl_id="33">33</button>
        <button class="tpl-anchor" data-tpl_id="34">34</button>
        <button class="tpl-anchor" data-tpl_id="35">35</button>
        <button class="tpl-anchor" data-tpl_id="36">36</button>
        <button class="tpl-anchor" data-tpl_id="37">37</button>
        <button class="tpl-anchor" data-tpl_id="38">38</button>
        <button class="tpl-anchor" data-tpl_id="39">39</button>
        <button class="tpl-anchor" data-tpl_id="40">40</button>

    </div>
    <div id="tpl-page">
        <div id="container">
            <div id="header">
                <h1>Header</h1>
            </div>
            <div id="wrapper">
                <div id="content">
                    <p><strong>1)Wrapper Content here. </strong>我们的目标是星辰大海</p>
                    <p>show css file in the textarea</p>
                    <textarea id="tpl-css-code" style="width: 80%;height: auto;">

                    </textarea>
                </div>
            </div>
            <div id="navigation">
                <p><strong>2) Navigation here.</strong>
                    long long fill filler very fill column column silly filler very
                    filler
                    fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column
                    text
                    column very very column fill fill very silly column silly silly fill fill long filler</p>
            </div>
            <div id="extra">
                <p><strong>3) Extra here.</strong>基于这个模板基本DOM 结构不能改变,所以 dodoru 机智地采用了动态加载CSS文件的方法</p>
                <p>这样做有一个特别好处，在本地 template/css文件夹下 编写 co10.css的文件，然后在浏览器上同一个页面 点击 10按钮，就能看到结果了。</p>
                <p>如果不对，修改本地的 co10.css ，再点一下10 按钮，就能看到最新的效果了。作为一个后端训练自己的前端,dodoru 对这个效果很满意。</p>
            </div>
            <div id="footer">
                <p>Here it goes the footer</p>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/tpl_row.js"></script>
</body>
</html>